<template>
	<view>
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 0">

        <view class="company">

           <uni-section title="公司资质" type="line" v-for="j in 4" :key="j">
             <view class="img-team">
				 <view class="img-box" v-for="i in 3" :key="i">
					 <image src="https://img0.baidu.com/it/u=2353777785,232169139&fm=253&fmt=auto&app=138&f=GIF?w=640&h=337" mode="aspectFill"></image>
				 </view>
             
			</view>
           </uni-section>
           
        </view>
        <view class="mean">
          <uni-section title="基础资料" type="line">
           <view class="mean-text">
             <p>公司名称：湖南金管家家政服务有限责任公司</p>
             <p>法人代表：马小艾</p>
             <p>公司电话：0731—86912560</p>
             <p>公司规模：200人以下</p>
             <p>公司地址：湖南省长沙市天心区暮云工业园凯覆漫城烛照小区4栋1311房</p>
           </view>
          </uni-section>
        </view>
        <view class="present">
          <uni-section title="公司介绍" type="line">
           <view class="present-text">
             <p>月子家政服务公司以家庭生活需求为向导,以资源的调整，整合为基础，以专业，便利的服务为手段，立足与于系统的解决和实现各类家政需求，引导客户家庭健康可持续发展，推动社会的进步，公司致力打造成为最具有影响力的品质家政管理规范的制定者和中式家政服务的集成者。</p>
           </view>
          </uni-section>
        </view>
        </view>
				<view v-if="current === 1"><text class="content-text">注册人员列表</text></view>
			</view>
				</view>
			</radio-group>
		</view>
	</view>
</template>

<script>
  export default {
    name:"segmented-control",
   components: {},
   		data() {
   			return {
   				items: ['公司资料', '注册人员'],
   				styles: [,
   					{
   						value: 'text',
   						text: '文字'
   					}
   				],
   				colors: ['#007aff'],
   				current: 0,
   				colorIndex: 0,
   				activeColor: '#007aff',
   				styleType: 'text'
   			}
   		},
      	methods: {
      			onClickItem(e) {
      				if (this.current !== e.currentIndex) {
      					this.current = e.currentIndex
      				}
      			},
      			styleChange(e) {
      				if (this.styleType !== e.detail.value) {
      					this.styleType = e.detail.value
      				}
      			},
      			colorChange(e) {
      				if (this.styleType !== e.detail.value) {
      					console.log(e.detail.value);
      					this.activeColor = e.detail.value
      				}
      			}
      		}
      }
</script>

<style lang="scss">
.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		// justify-content: center;
		align-items: center;
		// height: 150px;
		// text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		// border-bottom-style: solid;
		// border-bottom-width: 1px;
		// border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}
  .img-team{
    width: 678rpx;
    height:168rpx;
    display:flex;
    justify-content: space-around;
	image{
		width: 100%;
		height: 100%;
	}
  }
  .img-box{
    height: 148rpx;
    width: 200rpx;
    text-align: center;
    line-height: 148rpx;
    background-color:rgb(232, 232, 232) ;
  }
  .mean-text{
    padding-left: 30rpx; 
    line-height: 45rpx;
    font-size: 12px;
    color: rgb(123, 119, 119);
  }
  .present-text{
     padding-left: 30rpx; 
     line-height: 30rpx;
     font-size:12px;
     color: rgb(123, 119, 119);
  }
</style>